<template>
	<div class="check">
		<!-- 顶部按钮 -->
        <el-button type="info" class="submit" @click="submit" icon="search">查询</el-button>
        <!-- <el-button type="success" class="submit" @click="componentsShow('analyze',analyzeData)" icon="edit">分析</el-button> -->
        <!-- <el-button type="primary" class="submit" icon="check">考勤完成</el-button> -->



		<el-form ref="form" :model="form" label-width="60px" class="add-class-form" label-position="center">
            <el-form-item label="班级：">
            	<!-- <el-input v-model="form.class"></el-input> -->
                <el-select v-model="form.class" placeholder="请选择考试类型" class="select-block">
                    <el-option :label="v.bjmc" :value="v.bjmc" v-for="v in classList"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="DAY：" label-width="70px">
            	<!-- <el-input v-model="form.type"></el-input> -->
                <el-select v-model="form.type" placeholder="请选择类型" class="select-block">
                    <el-option :label="v.DAY" :value="v.DAY" v-for="v in typeList"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-button type="info" class="submit" @click="submit">查询</el-button> -->
	        <!-- <el-button @click="cancel" type="text">取消</el-button> -->
        </el-form>

    	<!-- <el-button type="info" class="submit" @click="componentsShow('analyze',analyzeData)">分析</el-button> -->
    	<!-- <el-button type="info" class="submit" @click="componentsShow('testEdit')">编辑</el-button> -->
    	<el-table :data="dataList" border stripe align="center" class="table">
            <div slot='empty'>
                <img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
                <span style="vertical-align: middle;">暂时还没有内容哦!</span>
            </div>
            <el-table-column
                :prop="v.prop"
                :label="v.label"
                v-for="(v,index) in dataHeaderList"
                align="center"
                min-width="130"
                v-if="v.hide != 0"
                show-overflow-tooltip
                :formatter="v.formatter"></el-table-column>
            <el-table-column
                label="操作"
                width="70"
                align="center"
                fixed="right">
                <template scope="scope">
                    <el-button size="small" type="text" @click="changeStatus(scope)">{{scope.row.zt}}</el-button>
                </template>
            </el-table-column>
        </el-table>

	</div>
</template>

<script type="text/javascript">
    import Vue from 'vue'
	export default {
		components: { },
		props: ['params', 'data'],
		data () {
			return {
				form: {
					class:'',
					type:''
				},
				analyzeData: {
					test: '',
					type: ''
				},
                status: '',
				testEditData: {},
				classList: [],
				typeList: [],
				dataHeaderList: [
					{
                        prop:'id',
                        label:'ID',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'bjmc',
                        label:'班级名称',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'jcmc',
                        label:'教材（册）',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'DAY',
                        label:'DAY',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'kqsj',
                        label:'时间',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {
                            return Vue.prototype.$.getLocalTime(row.kqsj)
                        }
                    },
                    {
                        prop:'lszwmc',
                        label:'老师中文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'lsywm',
                        label:'老师英文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'iszj',
                        label:'主教/助教',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'180px',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                    	prop:'xszwm',
                        label:'学生中文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                    	prop:'xsywm',
                        label:'学生英文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    }
				],
				portBntList: [//接口按钮列表
                    // {
                    //     name:'出勤',
                    //     type:'attendance'
                    // },
                    // {
                    //     name:'缺勤',
                    //     type:'absence'
                    // },
                    // {
                    //     name:'迟到',
                    //     type:'late'
                    // }
                ],
				dataList: [],
				componentList: {
					testEdit: {
	                    type: 'testEdit',
	                    toggle: false,
	                    params: '',
	                    data: {}
	                },
	                analyze: {
	                    type: 'analyze',
	                    toggle: false,
	                    params: '',
	                    data: {}
	                }
				}

			}
		},
		created () {
            this.$store.dispatch('changeTitle','考勤');//修改title
            this.$store.dispatch('changeRouterIndex','/admin/check');//修改路由

			this.getselectList()
		},
		methods: {
            changeStatus (scope) {
                if ( scope.row.zt == '迟到') {
                    scope.row.zt = '出勤';
                }else if ( scope.row.zt == '出勤' ){
                    scope.row.zt = '缺勤';
                }else{
                    scope.row.zt = '迟到';
                }
                this.axios.get(this.$store.state.api + 'kqjl/updateKqjl', {
                    params: {
                        id: scope.row.id,
                        zt: scope.row.zt
                    }
                }).then ( res => {
                    console.log(res)
                }).catch( res => {
                    console.log(res)
                })
            },
			submit () {
                this.$store.state.loading = true;
				this.axios.get(this.$store.state.api + 'kqjl/list',{
                    params: {
                        bjmc: this.form.class,
                        lx: this.form.type
                    }
                }).then ( res => {
                    console.log(res)
                    this.dataList = res.data.data.list;
                    this.$store.state.loading = false;
                }).catch( res => {
                    console.log(res);
                    // this.$store.dispatch('showAlert',res.data.msg);
                    this.$store.state.loading = false;
                })
			},

			getselectList () {
                this.axios.get(this.$store.state.api + 'kqjl/bjmc')
                    .then ( res => {
                        console.log(res)
                        this.classList = res.data.data.list;
                    }).catch( res => {
                        console.log(res)
                    })

                this.axios.get(this.$store.state.api + 'kqjl/lx')
                    .then ( res => {
                        console.log(res)
                        this.typeList = res.data.data.list;
                    }).catch( res => {
                        console.log(res)
                    })

			},
			componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.componentList ) {
                    if (type == this.componentList[i].type) {
                        console.log(this.componentList[i])

                        this.componentList[i].toggle = true;
                        this.componentList[i].params = data;
                        return;
                    }
                }
                console.log(this.componentList)

            },
			componentsHide (setting) { //关闭组件
                console.log(setting)
                for ( let i in this.componentList ) {
                    if (setting.type == this.componentList[i].type) {
                        this.componentList[i].toggle = false;
                        return;
                    }
                }
            }
		}

	}
</script>

<style lang="less" scoped>
	.check {

		.add-class-form {
			margin-top:10px;
		}

		.el-form-item {
			display: inline-block;
		}

		.submit {
			padding: 7px 15px;
		}

		.table {
			// margin-top:20px;
		}
	}
</style>
